<template>
	<div class="bottom_box">
		<ul>
			<li v-for="(item,index) of msg" :key="item.id" :class="{actives : active == item.title}" @click="bottomBtn()">
				<router-link :to="item.url">
					<img :src="item.icon" />
					<p>{{item.title}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		name:'bottom',
		data(){
			return {
				msg:[],
				active:"首页"
			}
		},
		methods: {
			getData:function() {
				axios.get('/api/bottom.json')
					.then(this.getDataSuc)
					.catch(err=>{
						console.log(err)
					})
			},
			getDataSuc:function(res){
				console.log(res)
				this.msg = res.data.data
			},
			bottomBtn:function(){
				this.active = this.$route.name
			}
		},
		mounted(){
			this.getData()
			this.active = this.$route.name
		}
	}
</script>

<style>
	.bottom_box{
		width: 100%;
		position: fixed;
		bottom: 0px;
		background: #fff;
		height: 1.1rem;
		border-top:1px solid #DDDDDD
	}
	.bottom_box ul{
		width: 92%;
		margin: 0px auto;
	}
	.bottom_box ul li{
		display: inline-block;
		width: 20%;
		text-align: center;
	}
	.bottom_box ul li img{
		width: 37%;
		margin-top: .14rem;
	}
	.bottom_box ul li p{
		font-size: .2rem;
		color: #333;
		margin-top: .1rem;
	}
	.bottom_box ul li.actives p{
		color: #057BDF;
		
	}
</style>
